
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import Drawer from '@/components/drawer/Index'
import FilterRender from '@/render/FilterRender'

import type {
    LongInsuranceCaseListDto,
    ReportCaseResultDto
} from '@/api/insurance/period/types'
import { Button, Dropdown, Menu, MenuItem, Tag } from 'ant-design-vue'
import { CaretDownOutlined, FormOutlined } from '@ant-design/icons-vue'
import RenderDescription, {
    type DescItemDto
} from '@/components/render-descriotion/Index' 
import WorkTypesTable from './components/WorkTypesTable'
import ApplicationRecord from './components/ApplicationRecord'
import AddBlacklistPop from './components/AddBlacklistPop'
import WorkTypesExaminePop from './components/WorkTypesExaminePop'
@Component
export class DispatchingUnitDetail extends FilterRender {
    uploadChangeKey = ''
    showAddBlacklist = false
    showWorkTypesExamine = false
    @Prop() show!: boolean
    // @Prop() previewList!: PeriodInsuranceMaterialsDto<InsuranceMaterialsFileDto>[]
    @Prop() basicInfo!: LongInsuranceCaseListDto<ReportCaseResultDto>
    showDrawer = false


   @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('change')
   handleChange() {
       return 
   }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        console.log(this.show,'监听信息')
        this.showDrawer = this.show
    }

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }
	
    get customerInfoData() {
        return [
            {
                label: '特别约定',
                value:'',
                slot: () => { 
                    return <div>
						月单的保险员工在保期间，不允许减保，允许替换。
                        <FormOutlined />
                    </div>
                }
            },
        ] as DescItemDto[]
    } 
    // @Watch('previewList', { immediate: true, deep: true })
    // handleWatchPreviewList(nav:PeriodInsuranceMaterialsDto<InsuranceMaterialsFileDto>[]) {
       
    // }
   
   
    
    render() {
        return (
            <>
				
                <Drawer v-model:open={this.showDrawer} hideCancel={ true } title="" size="800" height="100%">
                    <div class="">
                        <div class="pb-20" >
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="text-[#3D3D3D] text-xl font-semibold mr-16">前程似锦人力资源服务</div>
                                    <Tag color="error" >已驳回</Tag>
                                </div>
                                <div class="flex items-center">
                                    <Dropdown
                                        overlay={ 
                                            <Menu>
                                                <MenuItem >补充工种</MenuItem>
                                                <MenuItem >添加视频</MenuItem>
                                                <MenuItem >拉黑</MenuItem>
                                            </Menu>
                                        }
                                    >
                                        <div class="px-12 py-4 border-solid border-gray-light-300 border rounded-sm flex items-center mr-12">
                                            <div class="text-base">更多设置</div>
                                            <CaretDownOutlined />
                                        </div>
                                    </Dropdown>
                                    <Button type="primary" size="small">关闭</Button>
                                </div>
                            </div>
                            <div class="mt-8 text-black-300 text-base">ID：BS240001</div>
                        </div>
                        <div class="h-0.5 bg-[#F4F4F7] w-full"></div>
                        <RenderDescription class="mt-20" renderData={this.customerInfoData} row={1} />
                        <div class="mt-24">
                            <WorkTypesTable  title='系统可用工种'></WorkTypesTable>
                        </div>
                        <div class="mt-24">
                            <WorkTypesTable  title='蓝工盾可用工种'></WorkTypesTable>
                        </div>

                        <div class="mt-24">
                            <ApplicationRecord />
                        </div>
                        <AddBlacklistPop
                            v-model:show={this.showAddBlacklist}
                        />
                        <WorkTypesExaminePop
                            v-model:show={this.showWorkTypesExamine}
                        />
                    </div>
                    {/* <div class="w-full flex items-center justify-center">
                        <Button type="primary" >导出</Button>
                    </div> */}
                </Drawer>
            </>
        )
    }
}

export default toNative<{}, {change: () => void}>(DispatchingUnitDetail)